<template>
	<div class="page">
		<div class="nav-bar flex-row">
			<div class="logo">
				Mtime
			</div>
			<div class="nav-item">首页</div>
			<div class="nav-item actived">
				电影
			</div>
			<div class="nav-item">原创</div>
			<div class="nav-item">榜单</div>
			<div class="nav-item">社区</div>
			<div class="nav-item">视频</div>
		</div>
		<div class="color-background"></div>
		<div class="search-box">
			<div class="search-content flex-row">
				<div class="all-button">全部</div>
				<div class="iconfont icon-xia"></div>
				<div class="split-v"></div>
				<input class="keyword" v-model="keyword" type="text" placeholder="搜索电影、影人、文章、用户、家族" />
				<div class="iconfont icon-search" @click="dokeywordSearch"></div>
			</div>
		</div>
		<div class="page-content flex-column">

			<div class="content-menu flex-row">
				<div class="menu-item actived">影视</div>
				<div class="menu-item">影人</div>
				<div class="menu-item">内容</div>
				<div class="menu-item">用户</div>
				<div class="menu-item">家族</div>
			</div>
			<div class="selected-box page-box flex-row" v-if="currentType!='' || currentYear!=''">
				<div class="box-label">
					已选择：
				</div>
				<div class="selected-items flex-row">
					<div class="selected-item" v-if="currentType!=''">
						{{currentType.name}}
						<div class="iconfont icon-delete" @click="removeType"></div>
					</div>
					<div class="selected-item" v-if="currentYear!=''">
						{{currentYear}}年
						<div class="iconfont icon-delete" @click="removeYear"></div>
					</div>
				</div>
			</div>
			<div class="split-line"></div>
			<div class="types-box page-box flex-row">
				<div class="box-label">
					类型：
				</div>
				<div class="type-items flex-row">
					<div class="type-item" v-for="typeItem in typeList" 
					:key="typeItem.id" @click="typeClick(typeItem)" 
					:class="{'actived':typeItem.name==currentType.name}">
						{{typeItem.name}}
					</div>
				</div>
			</div>
			<div class="split-line"></div>
			<div class="years-box page-box flex-row">
				<div class="box-label">
					年代：
				</div>
				<select class="year-select" v-model="currentYear" @change="yearSelect">
					<option class="year-item" v-for="yearItem in yearList" :key="yearItem.movieYear" :value="yearItem.movieYear">{{yearItem.movieYear}}年</option>
				</select>
			</div>
			<div class="split-line"></div>
			<div class="page-box total-text flex-row">
				<div class="box-label">相关影视：</div>
				<div class="number">{{totalCount}}</div>个
			</div>
			<div class="movie-box page-box flex-column">
				<div class="movie-item" v-for="movieItem in movieList" :key="movieItem.movieId">
					<div class="movie-ratio-box">
						<div class="ratio-label">总评分</div>
						<div class="ratio-value">{{parseFloat(movieItem.rating).toFixed(1)}}</div>
					</div>
					<div class="movie-info-box">
						<div class="movie-title">{{movieItem.name}} {{movieItem.nameEn}} （{{movieItem.movieYear}}）</div>
						<div class="movie-info">
							<div class="movie-image">
								<img :src="movieItem.img" />
							</div>
							<div class="movie-detail">
								<div class="line-text">{{movieItem.length}}分钟 - 类型： {{movieItem.typeName.split(",").join("/")}}</div>
								<div class="line-text">导演： {{movieItem.directorName}}</div>
								<div class="line-text">主演： {{movieItem.actorsName.split(",")[0]}}</div>
								<div class="movie-button">查看详情</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="page-box flex-row" id="pagingBox">
				<!-- 向前一页按钮 -->
				<div class="last-button" v-if="!isFirst" @click="changePage(pageIndex-1)">&lt;</div>
				<!-- 第一页按钮 -->
				<div class="number-button" :class="{actived:pageIndex==0}" @click="changePage(0)">1</div>
				<!-- 向前一组分页按钮 -->
				<div class="number-button" v-if="pageIndex>(1+pagebuttonsCount)" @click="changePage(pageIndex-pagebuttonsCount-1)">...</div>
				<!-- 根据当前页变化的一组分页按钮 -->
				<div class="number-button" :class="{actived:pageIndex==(pageNumber-1)}" 
					v-for="pageNumber in pagebuttons" :key="pageNumber" @click="changePage(pageNumber-1)">{{pageNumber}}
				</div>
				<!-- 向后一组分页按钮 -->
				<div class="number-button" v-if="pageIndex<totalPage-pagebuttonsCount" @click="changePage(pageIndex+pagebuttonsCount-1)">...</div>
				<!-- 最后一页按钮 -->
				<div class="number-button" :class="{actived:pageIndex==totalPage-1}" @click="changePage(totalPage-1)">{{totalPage}}</div>
				<!-- 向后一页按钮 -->
				<div class="next-button" v-if="!isLast" @click="changePage(pageIndex+1)">&gt;</div>
			</div>
		</div>
	</div>
</template>
<style scoped>
	@import url("//at.alicdn.com/t/font_2863451_npexvzpdos.css");
	body {
		padding: 0;
		margin: 0;
	}
	.flex-row {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.flex-column {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.page {
		width: 100%;
		padding-top: 60px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.nav-bar {
		width: 100%;
		background-color: #1e2736;
		height: 60px;
		color: rgba(200, 200, 200, 1);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
	}

	.nav-bar .logo {
		font-size: 200%;
		font-weight: bold;
		margin-left: 10%;
		margin-right: 60px;
		color: #fff;
	}

	.nav-item {
		width: 80px;
		position: relative;
		font-size: 16px;
		cursor: pointer;
	}

	.nav-item.actived {
		color: #fff;
		font-weight: 500;
	}

	.nav-item.actived:after {
		content: '';
		width: 0;
		height: 0;
		border: 6px solid transparent;
		border-bottom-color: #fff;
		position: absolute;
		bottom: -20px;
		left: 8px;
	}

	.color-background {
		position: absolute;
		top: 60px;
		left: 0;
		width: 100%;
		background-color: #127bab;
		height: 300px;
	}

	.page-content {
		width: 80%;
		background-color: #fff;
		overflow-y: auto;
		z-index: 5;
		margin-top: 100px;
		position: relative;
		padding-top: 60px;
	}

	.search-box {
		width: 50%;
		height: 60px;
		margin: 0 auto;
		background-color: #127bab;
		padding: 10px;
		position: absolute;
		top: 120px;
		left: 25%;
		border-radius: 40px;
		z-index: 8;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search-box .search-content {
		width: calc(100% - 10px);
		height: 50px;
		border-radius: 25px;
		;
		background-color: #fff;
	}

	.search-box .search-content .all-button {
		margin-left: 20px;
		width: 60px;
		text-align: center;
		color: #33334d;
	}

	.search-box .search-content .icon-xia {
		margin-right: 20px;
	}

	.search-box .search-content .split-v {
		height: 30%;
		border-left: 1px solid rgba(200, 200, 200, 1);
		margin-right: 20px;
	}

	.search-box .search-content .keyword {
		height: calc(100% - 2px);
		border: none;
		flex: 1;
	}

	.keyword:focus {
		outline: none;
	}

	.search-box .search-content .icon-search {
		width: 40px;
		font-size: 150%;
		cursor: pointer;
	}

	.content-menu {
		width: calc(100% - 100px);
		padding: 0 50px;
		border-bottom: 1px solid rgba(200, 200, 200, 0.9);
		margin-bottom: 20px;
	}

	.content-menu .menu-item {
		padding: 10px 20px;
		margin-left: 10px;
		margin-right: 10px;

	}

	.content-menu .menu-item.actived {
		border-bottom: 2px solid #DF4706;
	}

	.page-box {
		margin-left: 50px;
		margin-right: 50px;
		padding: 20px 0;
		border-bottom: 1px dotted rgba(200, 200, 200, 0.5);
		align-items: flex-start;
	}

	.page-box .box-label {
		width: 100px;
		flex-shrink: 0;
		color: #333;
	}

	.selected-items {}

	.selected-item {
		border: 1px solid #0087e2;
		color: #0087e2;
		padding: 5px 10px;
		background-color: #ecf5ff;
		margin-right: 15px;
		border-radius: 4px;
		position: relative;
		padding-right: 30px;
	}

	.selected-item .icon-delete {
		width: 20px;
		height: 20px;
		line-height: 20px;
		position: absolute;
		top: calc((100% - 20px) / 2);
		right: 5px;
		color: #0087e2;
		cursor: pointer;
	}

	.type-items {
		flex-wrap: wrap;
		align-items: flex-start;
	}

	.type-items .type-item {
		margin-right: 10px;
		margin: 0px 25px 25px 0px;
		color: #4e5e73;
		cursor: pointer;
	}

	.type-items .type-item.actived {
		color: #20a0da;
	}

	.years-box {
		align-items: center;
	}

	.year-select {
		width: 200px;
		padding: 0 10px;
		height: 40px;
		border-radius: 4px;
		border: 1px solid rgba(200, 200, 200, 0.5);
		cursor: pointer;
	}

	.year-select:focus {
		outline: none;
	}

	.movie-item {
		padding-left: 90px;
		position: relative;
		zoom: 1;
		margin-bottom: 40px;
	}

	.movie-item .movie-ratio-box {
		position: absolute;
		left: 20px;
		top: 33px;
		width: 55px;
		height: 55px;
		text-align: center;
		background: #679c21;
		color: #fff;

	}

	.movie-item .movie-ratio-box .ratio-label {
		padding: 4px 0 0;
		font-weight: 400;
		font-size: 12px;
		display: inline-block;
	}

	.movie-item .movie-ratio-box .ratio-value {
		font-size: 23px;
		font-weight: 700;
		position: absolute;
		left: 10px;
		top: 23px;
		text-align: center;

	}

	.movie-image {
		overflow: hidden;
		display: block;
		float: left;
		margin-top: -15px;
	}

	.movie-image img {
		width: 98px;
		height: 130px;
		vertical-align: top;
		border: 1px solid #c4c4c4;
		cursor: pointer;
	}

	.movie-detail {
		float: left;
		width: 450px;
		margin-top: -22px;
		margin-left: 10px;
		font-size: 13px;
		line-height: 10px;

	}

	.line-text {
		margin: 18px 0;

	}

	.movie-title {
		font-size: 20px;
		line-height: 24px;
		font-weight: 400;
		padding: 30px 0;
		background: #fff;
	}

	.movie-button {

		background: #679c21;
		border-radius: 18px;
		color: #fff;
		width: 124px;
		height: 28px;
		font-size: 14px;
		line-height: 28px;
		overflow: hidden;
		text-align: center;
		float: left;
		letter-spacing: 2px;
		margin-top: 5px;
		margin-left: 5px;
	}



	#pagingBox {
		text-align: center;
		white-space: nowrap;
		padding: 2px 5px;
		color: #303133;
		font-weight: 700;
		display: flex;
		justify-content: center;
		margin-bottom: 25px;

	}

	.last-button {
		padding: 0 4px;
		font-size: 20px;
		min-width: 35.5px;
		height: 28px;
		line-height: 28px;
		box-sizing: border-box;
		text-align: center;
		background-color: #f4f4f5;
		cursor: pointer;
	}

	.last-button.actived {
		cursor: not-allowed;
		color: #c0c4cc;
	}

	.number-button {
		padding: 0 4px;
		font-size: 13px;
		min-width: 35.5px;
		height: 28px;
		line-height: 28px;
		box-sizing: border-box;
		text-align: center;
		background-color: #f4f4f5;
		margin-left: 15px;
		border-radius: 4px;
		cursor: pointer;
	}

	.number-button.actived {
		background-color: #409eff;
		color: #fff;

	}

	.next-button {
		padding: 0 4px;
		font-size: 20px;
		min-width: 35.5px;
		height: 28px;
		line-height: 28px;
		box-sizing: border-box;
		text-align: center;
		background-color: #f4f4f5;
		margin-left: 15px;
	}
</style>
<script>
	export default {
		name: 'HelloWorld',
		data(){
			return{
				//分类列表数组
				typeList:[],
				//年份列表数组
				yearList:[],
				//当前选择的分类
				currentType:"",
				//当前选择的年份
				currentYear:"",
				//查询关键字
				keyword:"",
				//影片列表
				movieList:[],
				//页码
				pageIndex:null,
				//页长
				pageSize:10,
				//记录总数
				totalCount:0,
				//页码总数
				totalPage:0,
				//是否第一页
				isFirst:false,
				//是否最后一页
				isLast:false,
				//分页器默认长度
				pagebuttonsCount:5,
				//分页器按钮数组
				pagebuttons:[]
			}
		},
		watch:{
			currentType(newValue,oldValue){
				console.log("监听到变量变化：currentType",newValue,oldValue);
			}
		},
		methods:{
			loadAllTypes(){
				this.http.get("http://118.25.42.197:9930/api/movies/categories").then((response)=>{
					console.log("获取分类列表数据：",response);
					if(response.status==200){//得到成功响应
						this.typeList=response.data;
					}
				}).catch((error)=>{
					console.log("获取分类列表错误：",error);
				})
			},
			loadAllYear(){
				this.http.get("http://118.25.42.197:9930/api/movies/years").then((response)=>{
					console.log("获取年份列表数据：",response);
					if(response.status==200){//得到成功响应
						this.yearList=response.data;
					}
				}).catch((error)=>{
					console.log("获取年份列表错误：",error);
				})
			},
			typeClick(typeItem){
				console.log("被点击的分类：",typeItem);
				//将被点击的分类赋值给当前分类变量
				this.currentType=typeItem;
				//触发查询，调用影片列表方法
				this.changePage(0);
			},
			yearSelect(event){
				console.log("被选择的年份：",event,this.currentYear);
				//触发查询，调用影片列表方法
				this.changePage(0);
			},
			//移除已选择条件，将分类或者年份重置位空
			removeYear(){
				this.currentYear="";
				this.changePage(0);
			},
			removeType(){
				this.currentType="";
				this.changePage(0);
			},
			dokeywordSearch(){
				this.changePage(0);
			},
			loadMovieList(pageIndex,callback){
				//获取影片列表的url
				var url="http://118.25.42.197:9930/api/movies/movie-list";
				//组织查询参数
				var params="a=1";//定义一个无效常量参数，方便后续参数的动态拼接
				if(this.currentType!=""){//如果指定了分类，拼接分类参数
					params+="&categories="+this.currentType.typeId;
				}
				if(this.currentYear!=""){//如果指定了年份，拼接年份参数
					params+="&movie_year="+this.currentYear;
				}
				if(this.keyword!=""){//如果输入了关键字，拼接关键字参数
					params+="&keyword="+this.keyword
				}
				params+="&pageNum="+pageIndex;//拼接指定的页码
				params+="&pageSize="+this.pageSize;
				if(params!="") url+="?"+params;
				if(pageIndex==0 || pageIndex!=this.pageIndex){//如果请求页码不相同，表示请求新的一页数据	
					//发送请求
					this.http.get(url).then((response)=>{
						if(response.status==200){
							this.pageIndex=pageIndex;//数据获取成功，设置当前页。
							if(response.data&&response.data.content){
								//将分页数组赋值给movieList
								this.movieList=response.data.content;
								//将分页信息赋值给对应变量
								this.totalCount=response.data.totalElements;
								this.totalPage=response.data.totalPages;
								this.isFirst=response.data.first;
								this.isLast=response.data.last;
								if(callback){
									callback();
								}
							}
						}
					})
					.catch(error=>{console.error("获取影片数据发生错误",error)})
				}
			},
			changePage(page){
				//发起加载数据，为loadMovieList方法添加回调函数参数，当数据加载完成后，对分页器进行渲染
				this.loadMovieList(page,()=>{
					if(this.totalPage>this.pagebuttonsCount+2){//总页数超过分页器需要显示的最少元素
						if(page<(1+this.pagebuttonsCount)){//如果是前几页
							let arr=[];
							for(let i=0;i<this.pagebuttonsCount;i++){
								arr.push(i+2);
							}
							this.pagebuttons=arr//构造前几页的页码数组，即2~6页
						} else if(page>(this.totalPage-this.pagebuttonsCount)){ //如果是后几页
							let arr=[];
							for(let i=this.pagebuttonsCount;i>0;i--){
								arr.push(this.totalPage-(i));
							}
							this.pagebuttons=arr
						} else{ //中间页码
							let n=parseInt(this.pagebuttonsCount/2);
							let arr=[];
							for(let i=n;i>0;i--){
								arr.push(page+1-i);
							}
							arr.push(page+1);
							for(let i=1;i<=n;i++){
								arr.push(page+1+i);
							}
							this.pagebuttons=arr;
						}
					}else{//总页数在分页器显示元素个数以内
						let arr=[];
						for(let i=0;i<this.totalPage-2;i++){
							arr.push(i+2);
						}
						this.pagebuttons=arr;
					}
					console.log("分页数组：",this.pagebuttons);
				});	
			}
		},
		beforeCreate(){
			console.log("生命周期：beforeCreate",this.movieList);
		},
		created(){
			console.log("生命周期：created",this.movieList);
		},
		beforeMount(){
			console.log("生命周期：beforeMount",this.movieList);
		},
		
		mounted() {
			console.log("生命周期：mounted",this.movieList);
			//调用获取全部分类数据的方法
			this.loadAllTypes();
			//调用获取全部年份数据的方法
			this.loadAllYear();
			this.changePage(0);
		},
		
		beforeUpdate() {
			console.log("生命周期：beforeUpdate",this.movieList);
		},
		updated(){
			console.log("生命周期：updated",this.movieList);
		},
		beforeDestroy() {
			console.log("生命周期：beforeDestroy",this.movieList);
		},
		destroyed() {
			console.log("生命周期：destroyed",this.movieList);
		}
	}
</script>
